<template>
  <li @mouseenter="handleEnter(true)" @mouseleave="handleEnter(false)">
    <label>
      <input type="checkbox" v-model="todo.complete"/>
      <span>{{todo.title}}</span>
    </label>
    <button v-show="isShow" @click="deleteItem">删除</button>
  </li>
</template>

<script>
export default {
 props: {
   todo: Object,
   index: Number,
   deleteTodo: Function
 },
 data () {
   return {
     isShow: false
   }
 },
 methods: {
   handleEnter(isEnter){
     if(isEnter) {
       this.isShow = true
     }else{
       this.isShow = false
     }
   },
   deleteItem() {
     const {todo, index, deleteTodo} = this
     if(window.confirm(`确认删除${todo.title}`)){
       deleteTodo(index)
     }
   }
 }
}
</script>

<style lang="scss">
  
</style>
